<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Chatting</title>
	<link rel="stylesheet" href="lib/jquery.mobile.flatui.css">
	<link rel="stylesheet" type="text/css" href="css/chat.css">
	<script type="text/javascript" src="lib/jquery-1.10.1.js"></script>
	<script type="text/javascript" src="lib/jquery.mobile-1.3.1.js"></script>
	<!-- <script src="cordova-2.7.0.js"></script
	> -->
	<script>
	function onLoad() {
		document.addEventListener("deviceready", onDeviceReady, false);
	}

	function onDeviceReady() {
		navigator.splashscreen.hide();				
	}

	</script>
</head>
<body onload="onLoad()">

	<div id="chat" data-role="page">
		<div data-role="header" data-position="fixed" data-tap-toggle="false">
			<h1>대화창</h1>
		</div>
		<div class="chat-list-box" data-role="content">
			<ul class="chat-list">
				<li class="others">
									
				</li>	
				<li class="mine">

				</li>	
			</ul>	
		</div>
		<div data-role="footer" data-position="fixed" data-tap-toggle="false">
			<div class="input-container">
				<a class="attachment-btn" href="#attachment-menu" 
				data-role="button" data-theme="f" data-icon="arrow-r" data-inline="true" data-iconpos="notext">첨부 메뉴</a>
				<input class="message-input"type="text" placeholder="메시지를 입력하세요" data-theme="c">
				<div class="send-btn-wrap">
					<button class="send-btn" type="button" data-inline="false" data-theme="f">
						전송</button>
					</div>
				</div>
			</div>
		</div>
</body>
</html>

<!-- 소켓 라이브러리 사용 -->
<script>


function connect() {

	var socket;
	var host = "ws://ec2-54-213-54-241.us-west-2.compute.amazonaws.com";

	try { 
		socket = new WebSocket(host);
	}

}


function showMessage() {
	
}

$(document).on("click", "#chat .send-btn" , function() {

	// 입력 폼으로부터 메세지 값 받음
	var message = $("#chat .message-input").val();

	console.log(message);
	// 서버로 메세지 전송

});

</script>